import React from "react";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
// core components
import Card from "../../components/Card/Card.jsx";
import CardHeader from "../../components/Card/CardHeader.jsx";
import CardBody from "../../components/Card/CardBody.jsx";

const style = {
  typo: {
    paddingLeft: "25%",
    marginBottom: "40px",
    position: "relative"
  },
  note: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    bottom: "10px",
    color: "#c0c1c2",
    display: "block",
    fontWeight: "400",
    fontSize: "13px",
    lineHeight: "13px",
    left: "0",
    marginLeft: "20px",
    position: "absolute",
    width: "260px"
  },
  cardCategoryWhite: {
    color: "rgba(255,255,255,1)",
    margin: "0",
    fontSize: "14px",
    marginTop: "0",
    marginBottom: "0"
  },
  cardTitleWhite: {
    color: "#FFFFFF",
    marginTop: "0px",
    minHeight: "auto",
    fontWeight: "300",
    fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
    marginBottom: "3px",
    textDecoration: "none"
  }
};

function TypographyPage(props) {
  const { classes } = props;
  return (
    <Card>
      <CardHeader color="info">
        <h4 className={classes.cardTitleWhite}>项目介绍</h4>
        <p className={classes.cardCategoryWhite}>
          本框架的主要导向是针对后台开发者，希望能够通过一系列的组件封装来提供一个简单易用的前端框架。
        </p>
        <p className={classes.cardCategoryWhite}>
          项目的特点应该是高度封装，使用户尽量不去关注样式布局。并能够通过少量的代码处理复杂的业务逻辑，实现后台管理类项目的快速开发。
        </p>
      </CardHeader>
      <CardBody>
        <div>
          <h1 id="toc_0">下载与安装使用</h1>

          <blockquote>
            <p>准备一个前后端分离的项目开发，我们首先想到的就是使用<a href="https://juejin.im/entry/567a108c00b0e902c0717751">webpack</a>;那么webpack作为一个模块化平台，需要在node环境下运行，所以第一步我们要先进行<a
              href="https://nodejs.org/en/download/">node下载</a>。下载完成后node里自带了npm包管理器，通过npm你可以下载安装各种你想要的工具，框架，平台等等。当然你也可以使用yarn..在本项目中我们统一使用npm来处理
            </p>
          </blockquote>

          <ul>
            <li>框架介绍</li>
          </ul>

          <p>框架中以及通过create-react-app集成了webpack和react包括其他一系列的工具。用户只要进行一键部署，从而跳过复杂的webpack配置等操作，从而聚焦业务开发。</p>

          <ul>
            <li><p>项目下载</p></li>
          </ul>

          <ol>
            <li><p>本框架项目代码目前部署在<a href="https://gitee.com/">gitee</a>，所以请先在本地安装<a
              href="https://www.git-scm.com/download/">git</a>。git安装完成后，就可以进行<a
              href="https://gitee.com/kunnisser/starAdmin">starAdmin</a>的下载了，在本地新建一个目录列如XXXADMIN.然后把框架代码下载到你新建的项目目录中。<br/>
              <code>git clone https://gitee.com/kunnisser/starAdmin</code></p></li>
            <li><p>下载完成后会发现里面有一个package的json文件，里面包含了框架的相关依赖库文件。类似于java maven里的pom.xml, 里面的相关内容一部分在dependencies运行依赖中,
              一部分在devDependencies开发依赖中， 因此我们在运行项目之前，还要安装对应的依赖库。</p>
              <pre className={'language-text'}>
                <code className="language-text">{`cd XXXADMIN

npm install`}
                </code>
              </pre>
            </li>
            <li><p>项目安装完成后，可执行以下命令</p>
              <p><code>npm run start</code></p>
              <p>↑项目本地测试命令</p>
              <p><code>npm run startDev</code></p>
              <p>↑项目内网测试命令</p>
              <p><code>npm run buildDev</code></p>
              <p>↑项目内网打包</p>
              <p><code>npm run buildPro</code></p>
              <p>↑项目外网打包</p>
            </li>
          </ol>

        </div>
      </CardBody>
    </Card>
  );
}

export default withStyles(style)(TypographyPage);
